import React from 'react';
import { ScanStatus, IssueSeverity, ConfirmationStatus } from '../types';
import { CheckCircle2, XCircle, Clock, AlertTriangle, Info, AlertOctagon } from 'lucide-react';

export const ScanStatusBadge: React.FC<{ status: ScanStatus }> = ({ status }) => {
  switch (status) {
    case ScanStatus.COMPLETED:
      return (
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">
          <CheckCircle2 className="w-3 h-3" /> Completed
        </span>
      );
    case ScanStatus.FAILED:
      return (
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-rose-50 text-rose-700 border border-rose-100">
          <XCircle className="w-3 h-3" /> Failed
        </span>
      );
    case ScanStatus.RUNNING:
      return (
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-50 text-blue-700 border border-blue-100 animate-pulse">
          <Clock className="w-3 h-3 animate-spin" /> Scanning...
        </span>
      );
    default:
      return <span className="text-slate-500 text-xs">{status}</span>;
  }
};

export const SeverityBadge: React.FC<{ severity: IssueSeverity }> = ({ severity }) => {
  switch (severity) {
    case IssueSeverity.CRITICAL:
      return <span className="flex items-center gap-1 text-rose-600 font-medium text-xs"><AlertOctagon className="w-3 h-3"/> Critical</span>;
    case IssueSeverity.WARNING:
      return <span className="flex items-center gap-1 text-amber-600 font-medium text-xs"><AlertTriangle className="w-3 h-3"/> Warning</span>;
    case IssueSeverity.INFO:
      return <span className="flex items-center gap-1 text-blue-500 font-medium text-xs"><Info className="w-3 h-3"/> Info</span>;
    default:
      return null;
  }
};

export const ConfirmationBadge: React.FC<{ status: ConfirmationStatus, type?: string }> = ({ status, type }) => {
    if (status === ConfirmationStatus.CONFIRMED) {
        return (
            <div className="flex flex-col items-start">
                 <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold bg-indigo-50 text-indigo-600 border border-indigo-100">
                    CONFIRMED
                 </span>
                 <span className="text-[10px] text-slate-500 mt-0.5">{type}</span>
            </div>
        )
    }
    return (
        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-100 text-slate-500 border border-slate-200">
            PENDING
        </span>
    )
}